<template>
  <div class="relative w-full h-full">
    <PageHeader :title="t('service.售后管理')" />
    <el-radio-group v-model="type" class="mb10" @change="changeType">
      <el-radio-button :label="t('service.待处理售后订单')" value="1" />
      <el-radio-button :label="t('service.已处理售后订单')" value="2" />
    </el-radio-group>
    <SearchCom
      :searchList="searchList"
      @search="handleSearch"
      @reset="handleReset"
    />
    <!-- <div class="mt12 toolbar flex_aic_jcsb">
      <div class="addBtn flex_aic_jcc" @click="handleExport">
        <SvgIcon name="iconziyuan23" color="rgb(255, 89, 8)" class="mr8" />
        <span>{{ t('service.导出') }}</span>
      </div>
    </div> -->
    <div style="height: calc(100% - 260px)" v-loading="loading">
      <Table :goodList="tableData" />
    </div>
    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, watchEffect, onActivated } from "vue";
import Api from "@/config/api/api";
import SearchCom from "@/components/SearchCom.vue";
import { useTableMixin } from "@/utils/tableMixin";
import Table from "./Table.vue";
import { refundStatusMap } from "./data";
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n();

const options = Object.keys(refundStatusMap).map((key) => ({
  label: t(`service.${refundStatusMap[key]}`),
  value: key,
}));
const searchList = ref([]);
const type = ref("1");

watchEffect(()=> {
  console.log(locale.value);
  searchList.value = [
    {
      label: t("service.原单号"),
      key: "sourceSaleNo",
      type: "input",
    },
    {
      label: t("service.退款单号"),
      key: "saleNo",
      type: "input",
    },
    {
      label: t("service.会员名"),
      key: "vipNickName",
      type: "input",
    },
    {
      label: t("service.收货手机号"),
      key: "vipAddressPhone",
      type: "input",
    },
    {
      label: t("service.商品ID"),
      key: "skuId",
      type: "input",
    },
    {
      label: t("service.售后状态"),
      key: "refundStatus",
      type: "select",
      options: type.value == 1 ? [
        {label: "已申请待审核", value: -2},
        {label: "待商家确认收货", value: -5},
      ] : [
        {label: "退款驳回", value: -4},
        {label: "待买家发货", value: -3},
        {label: "退款完成", value: -6},
      ],
    },
  ]
})
// 使用表格 mixin
const fetchMessages = (params) => {
  // 添加语言参数
  return Api.getOrderList({
    ...params,
    tranType: 2,
    refundStatuses: type.value == 1 ? [-5, -2] : [-3, -6, -4, -1, 0],
    // type: type.value,
  });
};
const {
  currentPage,
  pageSize,
  total,
  tableData,
  loading,
  getDataList,
  handleSizeChange,
  handleCurrentChange,
  handleSearch,
  handleReset,
} = useTableMixin(fetchMessages);

const changeType = () => {
  currentPage.value = 1;
  getDataList();
};

onActivated(()=> {
  console.log("onActivated");
  getDataList();
})
</script>

<style lang="scss" scoped>
.toolbar {
  width: 100%;
  height: 42px;
  margin-bottom: 5px;
  background: rgba(255, 126, 40, 0.1);
}
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.split {
  width: 1px;
  height: 12px;
  background: #ddd;
  margin: 0 5px;
}
</style>
